import { defineComponent } from 'vue'

export default defineComponent({
  name: 'react',
  setup () {
    return () => (
      <div class='contentCenter'>
        <div>
          <h3>react 配置</h3>
          <p>

          </p>
        </div>

        <div>支持jsx需要额外配置babel去处理jsx文件，将jsx转译成为浏览器可以识别的js</div>
        <div className="code">
          <pre>
            babel-loader<br />
            @babel/core<br />
            @babel/preset-env<br />
            @babel/plugin-transform-runtime<br />
            @babel/preset-react<br />

            支持typescript <br />
            npm install --save-dev @babel/preset-typescript <br />
            .babelrc文件
            <code>
              {` 
  {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
   "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}            
              `}
            </code>

        初始化tsconfig.json<br />
            yarn add -D typescript<br />
            npx tsc --init<br />

            配置css/sass<br />
            sass-loader<br />
            resolve-url-loader<br />
            postcss-loader<br />
            css-loader<br />
            MiniCssExtractPlugin.loader<br />

            新建一个postcss.config.js的文件<br />
            <code>
              {` 
        module.exports = {
          plugins: [
            require('autoprefixer'),
            require('cssnano')({
              preset: 'default',
            }),
          ],
        }           
              `}
            </code>
          </pre>
        </div>
      </div>
    )
  }
})